<div class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title"><strong>catSlider</strong></h3>
	</div>
	<div class="panel-body">
		<h3><strong>关于</strong></h3>
		<p>
			jQuery catSlider 项目主页：<a target="_blank" href="http://www.pixedelic.com/plugins/camera">http://www.pixedelic.com/plugins/camera</a>
		</p>
		<h3>通过HTML文档data属性</h3>
		<p>仅仅通过向页面元素添加<code>data-sea="jPage"</code> 就可以为其赋予Ajax Pages 翻页效果。<br />
		<h3><strong>通过 <code>data-option</code>或者 <code>data-config</code>，设定参数</strong></h3>
		<ul>
			<li><p>
				<strong><code>css</code>参数，默认值：<code>False</code>，说明：</strong>
			</p></li>
		</ul>
		<div class="bs-example">
			<div class="bs-sidebar row">
				<div class="col-md-12">
					<div class="mi-slider" data-sea="catSlider">
						<ul>
							<li><a href="#"><img src="images/slider/catslider/1.jpg" alt="img01"><h4>Boots</h4></a></li>
							<li><a href="#"><img src="images/slider/catslider/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
							<li><a href="#"><img src="images/slider/catslider/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
							<li><a href="#"><img src="images/slider/catslider/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
						</ul>
						<ul>
							<li><a href="#"><img src="images/slider/catslider/5.jpg" alt="img05"><h4>Belts</h4></a></li>
							<li><a href="#"><img src="images/slider/catslider/6.jpg" alt="img06"><h4>Hats &amp; Caps</h4></a></li>
							<li><a href="#"><img src="images/slider/catslider/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
							<li><a href="#"><img src="images/slider/catslider/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
						</ul>
						<ul>
							<li><a href="#"><img src="images/slider/catslider/9.jpg" alt="img09"><h4>Casual</h4></a></li>
							<li><a href="#"><img src="images/slider/catslider/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
							<li><a href="#"><img src="images/slider/catslider/11.jpg" alt="img11"><h4>Sport</h4></a></li>
						</ul>
						<ul>
							<li><a href="#"><img src="images/slider/catslider/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>
							<li><a href="#"><img src="images/slider/catslider/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>
							<li><a href="#"><img src="images/slider/catslider/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>
							<li><a href="#"><img src="images/slider/catslider/15.jpg" alt="img15"><h4>Briefcases</h4></a></li>
						</ul>
						<nav>
							<a href="#">鞋子</a>
							<a href="#">Accessories</a>
							<a href="#">Watches</a>
							<a href="#">Bags</a>
						</nav>
					</div>
					<pre data-sea="seaSnippet" data-config="seaSnippet">
&lt;div class=&quot;mi-slider&quot; data-sea=&quot;catSlider&quot;&gt;
	&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/1.jpg&quot; alt=&quot;img01&quot;&gt;&lt;h4&gt;Boots&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/2.jpg&quot; alt=&quot;img02&quot;&gt;&lt;h4&gt;Oxfords&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/3.jpg&quot; alt=&quot;img03&quot;&gt;&lt;h4&gt;Loafers&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/4.jpg&quot; alt=&quot;img04&quot;&gt;&lt;h4&gt;Sneakers&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/5.jpg&quot; alt=&quot;img05&quot;&gt;&lt;h4&gt;Belts&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/6.jpg&quot; alt=&quot;img06&quot;&gt;&lt;h4&gt;Hats &amp;amp; Caps&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/7.jpg&quot; alt=&quot;img07&quot;&gt;&lt;h4&gt;Sunglasses&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/8.jpg&quot; alt=&quot;img08&quot;&gt;&lt;h4&gt;Scarves&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/9.jpg&quot; alt=&quot;img09&quot;&gt;&lt;h4&gt;Casual&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/10.jpg&quot; alt=&quot;img10&quot;&gt;&lt;h4&gt;Luxury&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/11.jpg&quot; alt=&quot;img11&quot;&gt;&lt;h4&gt;Sport&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/12.jpg&quot; alt=&quot;img12&quot;&gt;&lt;h4&gt;Carry-Ons&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/13.jpg&quot; alt=&quot;img13&quot;&gt;&lt;h4&gt;Duffel Bags&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/14.jpg&quot; alt=&quot;img14&quot;&gt;&lt;h4&gt;Laptop Bags&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/15.jpg&quot; alt=&quot;img15&quot;&gt;&lt;h4&gt;Briefcases&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;nav&gt;
		&lt;a href=&quot;#&quot;&gt;&#38795;&#23376;&lt;/a&gt;
		&lt;a href=&quot;#&quot;&gt;Accessories&lt;/a&gt;
		&lt;a href=&quot;#&quot;&gt;Watches&lt;/a&gt;
		&lt;a href=&quot;#&quot;&gt;Bags&lt;/a&gt;
	&lt;/nav&gt;
&lt;/div&gt;</pre>
				</div>
			</div>
		</div>
	</div>
</div>